<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        /* 数组的解构 */
        const FAMILY = ['daddy', 'mommy', 'sister'];
        let [dad, mom, sis] = FAMILY;
        console.log(dad, mom, sis);

        let [foo = true] = [];
        console.log(foo); //true

        /* 对象的解构 */
        const zhao = {
            name: '赵本山',
            age: 'i dont know',
            xiaopin: function () {
                console.log("i am xiaopin");
            }
        };
        let { age, name, xiaopin } = zhao;
        // 变量名和属性名/方法名必须同名才能获取，与顺序无关
        console.log(name, age);
        xiaopin();
        const { log } = console;
        log("i can log");

        /* 
            对象的解构是下列语句的简写
            let { foo: foo, bar: bar } = { foo: 'aaa', bar: 'bbb' };
        */
        let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
        console.log(baz); // "aaa"
        console.log(foo); // error: foo is not defined

        // const {value: v} = this.keyWordNode; 解构的重命名
        // const {keyWordNode:{value}} = this; 嵌套解构

        // 对象解构赋值可以取到继承的属性&方法
        const obj1 = {};
        const obj2 = { fooo: 'bar', hello: function () { console.log("hello") } };
        Object.setPrototypeOf(obj1, obj2);

        const { fooo, hello: helloo } = obj1;
        console.log(fooo); // "bar"
        helloo(); //hello

        function Person(name, age) {
            this.name = name;
            this.age = age;
        }
        Person.prototype.sayName = function () {
            console.log("i am " + this.name);
        }
        function Student(name, age, grade) {
            Person.call(this, name, age);
            this.grade = grade;
        }
        Student.prototype = new Person();

        const s1 = new Student("s1", 1, 1);
        s1.sayName();
        const { sayName: sayname } = s1;
        console.log(sayname, s1);
        sayname.call(s1);

        // 在对象的属性值严格等于undefine时, 对象的解构可以指定默认值
        var { x: y = 3 } = {};
        console.log(y); // 3
        var { x: y = 3 } = { x: 5 };
        console.log(y); //5
        var { x = 3 } = { x: undefined };
        console.log(x); //3
        var { x = 3 } = { x: null };
        console.log(x); //null

        // 数组对象属性也可以解构
        let arr = [1, 2, 3];
        let { 0: first, [arr.length - 1]: last } = arr;
        console.log(first, last); //1 3

        /* 字符串解构 */
        const [a, b, c, d, e] = "12345";
        const { length: len } = "12345";
        console.log(a, b, c, d, e, len); // 1 2 3 4 5 5

        /* 数值&布尔值 undefined&null的解构 */
        // 等号右边不是数组或对象时, 将其转换为对象后进行解构。
        //由于undefine和null无法转换为对象，所以对他们进行解构时会报错。

        /* 函数参数的解构 */
        function add([x, y]) {
            return x + y;
        }
        console.log(add([1, 2])); // 3
        // 函数参数也可以使用默认值，解构失败时，x和y等于默认值
        // 为变量x&y指定默认值
        function move({ x = 0, y = 0 } = {}) {
            return [x, y];
        }
        console.log((move({ x: 3, y: 8 })) instanceof Array); // [3, 8]
        console.log(move({ x: 3 })); // [3, 0]
        console.log(move({})); // [0, 0]
        console.log(move()); // [0, 0]
        console.log("-------------------");
        //为move的参数指定默认值
        function move({ x, y } = { x: 0, y: 0 }) {
            return [x, y];
        }
        console.log(move({ x: 3, y: 8 })); // [3, 8]
        console.log(move({ x: 3 }));; // [3, undefined]
        console.log(move({}));; // [undefined, undefined]
        console.log(move());; // [0, 0]

        /* 变量解构赋值的用途 */
        // 1 - 交换变量值
        {
            let x = 1;
            let y = 2;
            [x, y] = [y, x];
            console.log(x, y); // 2 1
        }
        // 2 - 获取函数返回值
        {
            function eg1() {
                return [1, 2, 3];
            }
            let [a, b, c] = eg1();
            console.log(a, b, c);
            function eg2() {
                return {
                    name: 11,
                    age: 11
                };
            }
            let { name: names, age: ages } = eg2();
            console.log(names, ages);
        }
        // 3 - 函数定义多个参数，有序用数组，无序用对象
        // 4 - 提取JSON数据
        {
            let jsonData = {
                id: 42,
                status: "OK",
                data: [867, 5309]
            };
            let { id, status, data: number } = jsonData;
            console.log(id, status, number); // 42, "OK", [867, 5309]
        }
        // 5 - 精简指定函数参数默认值代码
        // 6 - 遍历MAP
        // 7- 加载模块时指定输入方法
    </script>
</body>

</html>